import {
    getBanners,
    getSongMenu
} from '../../service/music-api';
import { playerStore } from '../../store/player-store';
import debouonce from '../../utils/debounce';
import queryReact from '../../utils/query-react';
import {
    rankingStore,
    rankingMap
} from '../../store/index';
// 函数防抖
const debounceQueryReact = debouonce(queryReact);
Page({
    data: {
        swiperHeight: 0,
        banners: [],
        hotSongMenu: [],
        recommendSongMenu: [],
        recommendSongs: [],
        rankings: {
            0: {},
            2: {},
            3: {}
        }
    },

    // 去推荐页的更多
    handleToMoreClick() {
        wx.navigateTo({
            url: '/pages/music-recommend/index',
        })
    },
    handleToMenuPage(event) {
        const idx = event.currentTarget.dataset.idx;
        const ranking = rankingMap[idx];
        wx.navigateTo({
          url: `/pages/music-menu-detail/index?ranking=${ranking}&type=rank`,
        })
    },
    inputClickHandler() {
        wx.navigateTo({
            url: '/pages/music-search/index',
        })
    },

    // 点击要跳转同时保存歌曲列表
    handleSongItemClick: function(event) {
        const index = event.currentTarget.dataset.index
        playerStore.setState("playListSongs", this.data.recommendSongs)
        playerStore.setState("playListIndex", index) 
    },
    imageLoaded() {

        // 根据图片高度设置轮播图容器高度
        debounceQueryReact('#image-cover').then(([imageItemInfo]) => {
            this.setData({
                imageHeight: imageItemInfo.height
            });
        })
    },
    // 网络请求
    getPageData: function () {

        // 获取轮播图
        getBanners().then(res => {
            this.setData({
                banners: res.banners
            })
        })

        // 获取热歌榜
        getSongMenu().then(res => {
            this.setData({
                hotSongMenu: res.playlists
            })
        })

        // 推荐热单
        getSongMenu("华语").then(res => {
            this.setData({
                recommendSongMenu: res.playlists
            })
        })
    },

    // 获取歌单排行榜
    getRankingHandler: function (idx) {
        return (res) => {
            if (Object.keys(res).length === 0) return
            // 当前索引对应的数据
            const rankingObj = {
                name: res.name,
                coverImgUrl: res.coverImgUrl,
                playCount: res.playCount,
                // 取出三条歌曲数据
                songList: res.tracks.slice(0, 3)
            }
            /**
             * rankings : {
             *      0: {},
             *      2: {},
             *      3: {}
             * }
             */
            this.setData({
                rankings: {
                    ...this.data.rankings,
                    [idx]: rankingObj
                }
            })
        }
    },
    onLoad: function () {

        // 加载本页面数据
        this.getPageData();
        // 加载共享数据
        rankingStore.dispatch('getRankingDataAction');

        // 新歌榜
        rankingStore.onState('newRanking', ({
            tracks = []
        }) => {
            this.setData({
                recommendSongs: tracks.slice(0, 6)
            })
        });

        rankingStore.onState("newRanking", this.getRankingHandler(0));
        rankingStore.onState("originRanking", this.getRankingHandler(2));
        rankingStore.onState("upRanking", this.getRankingHandler(3));
    },
})